<template>
  <div class="jxjk-box">

    <div><span class="Profile-List"></span> 居民健康异常统计</div>
    <div class="jxjk-selebox">
      <div class="jxjk-selebox-top">
        <span>数据类型</span>
        <el-select v-model="value" clearable placeholder="全部" @change="datatypeChange" size="small">
          <el-option v-for="item in datatypeList" :key="item.id" :label="item.name" :value="item.name" />
        </el-select>
      </div>
      <div class="jxjk-selebox-bottom">
        <span>选择签约时间</span>
        <DatePicker></DatePicker>
      </div>
    </div>
    <div>
      <ResidentOption></ResidentOption>
    </div>

    <div>
      <el-table :data="jxxxList" stripe style="width: 100%;font-size: 12px;">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="number" label="编号" align="center" />
        <el-table-column prop="picture" label="头像" align="center">
          <template #default="{ row }">
            <img :src="'http://127.0.0.1:3000/' + row.picture" style="width: 40px">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="居民信息" align="center" />
        <el-table-column prop="createTime" label="测量时间" align="center" width="160" />
        <el-table-column :prop="dataType" label="数据类型" align="center">
          <template #default='{ row }' v-if="numVal == 'bloodSugar'">
            {{ row.recordTime == '0' ? '血糖（餐前）' : '血糖（餐后）' }}
          </template>
          <template #default='{ row }' v-else>
            {{ dataType }}
          </template>
        </el-table-column>
        <el-table-column :prop="numVal" :label="'数值' + '(' + jod + ')'" align="center">
          <template #default='{ row }' v-if="numVal == 'systolic'">
            {{ row.diastolic }}/{{ row.systolic }}
          </template>
        </el-table-column>
        <el-table-column label="评估" align="center">
          <template #default='{ row }' v-if="numVal == 'weight'">
            {{ row.weight < 40 ? '偏瘦' : row.weight > 40 && row.weight < 60 ? '健康' : '偏胖' }} </template>
                <template #default='{ row }' v-if="numVal == 'heartRate'">
                  {{ row.heartRate < 60 ? '偏低' : row.weight > 60 && row.weight < 100 ? '正常' : '偏高' }} </template>
                      <template #default='{ row }' v-if="numVal == 'bloodSugar'">
                        {{ row.bloodSugar < 3.9 ? '偏低' : row.bloodSugar > 3.9 && row.bloodSugar < 7.8 ? '正常' : '偏高' }}
                            </template>
                            <template #default='{ row }' v-if="numVal == 'systolic'">
                              {{ row.diastolic < 90 && row.systolic < 60 ? '低血压' : row.diastolic > 120 && row.systolic > 80
                                ?
                                '高血压' : '正常'
                              }} </template>
        </el-table-column>
        <el-table-column label="数据来源" align="center">
          用户记录
        </el-table-column>
        <el-table-column prop="residentId" label="操作" align="center">
          <template #default="{ row }">
            <el-button link type="text" size="small" @click.prevent="go(`/home/ResidentParticulars/${row.residentId}`)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang='ts' setup>
// import { jxsjType } from "@/types/mmm/jmsjType"
import { ref } from 'vue'
import api from '@/api'
import DatePicker from '@/components/mmm/DatePicker.vue';
import ResidentOption from '@/components/mmm/ResidentOption.vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const value = ref('')
let datatypeList = ref()
let jxxxList = ref([])
let dataType = ref<string>("体重")
let numVal = ref<string>("weight")
let jod = ref('kg')
let data = ref({
  residentId: "",
  limit: "7"
})
//获取数据类型
const postdatatype = async () => {
  const result = await api.Mdatastatistics.postdatatypeApi()
  datatypeList.value = result.data.data

}
postdatatype()

//页面默认数据
const mrsj = async () => {
  const result = await api.Mdatastatistics.postWeightByResidentIdApi()
  console.log("体重", result.data.data);
  jxxxList.value = result.data.data
  dataType.value = "体重"
  numVal.value = 'weight'

}
mrsj()
const datatypeChange = async (val: string) => {
  if (val === "体重") {
    jxxxList.value = []
    mrsj()
  }
  else if (val === '心率') {
    jxxxList.value = []
    const result = await api.Mdatastatistics.postHeartRateByResidentIdApi()
    console.log("心率", result.data.data);
    jxxxList.value = result.data.data
    dataType.value = "心率"
    numVal.value = "heartRate"
    jod.value = 'bmp/L'
  } else if (val === "血糖") {
    jxxxList.value = []
    const result = await api.Mdatastatistics.postBloodSugarByResidentIdApi()
    console.log("血糖", result.data.data);
    jxxxList.value = result.data.data
    numVal.value = "bloodSugar"
    jod.value = 'mmol/L'
  } else if (val === "血压") {
    jxxxList.value = []
    const result = await api.Mdatastatistics.postBloodPressureByResidentIdApi(data.value)
    console.log("血压", result.data.data);
    jxxxList.value = result.data.data
    dataType.value = "血压"
    numVal.value = "systolic"
    jod.value = 'mmHg'
  }
}


//查看详情
const go = (path: any) => {
  router.push(path)

}
</script>

<style lang='scss' scoped>
.jxjk-box {
  @include BoxStyle;

  .Profile-List {
    @include dataList;
  }

  .jxjk-selebox {
    font-size: 12px;
    color: #999;
    display: flex;
    margin-top: 20px;

    span {
      margin: 0 17px;
    }

    .jxjk-selebox-bottom {
      display: flex;
    }

  }
}
</style>